<template>
  <el-dialog :visible.sync="visible" title="匹配字段" width="600px"
             @open="openDialog"
             @close="closeDialog">
    <el-row>
      <el-col :span="10" :offset="2">
        <span class="label">素材字段: {{ crtField.name }}</span>
      </el-col>
      <el-col :span="12" v-if="insertSynonymDisplayFlag">
        <el-checkbox v-model="insertSynonymFlag">加入匹配词</el-checkbox>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px">
      <!-- 过滤已匹配知识单元字段的知识字段, 第一个字段为名称, 无需指定 -->
      <el-table ref="mapTable" :data='filteredKnowledgeFieldList'
                :max-height="CONST.WORKSPACE_HEIGHT - 290"
                @current-change="row => crtRow = row"
                stripe border>
        <el-table-column label="知识字段" prop="name" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="匹配词" :formatter="row => row.synonym.join('; ')" prop="synonym" min-width="200" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </el-row>
    <span class="dialog-footer" slot="footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button @click="submitMatchField" type="primary">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "KUF2KFMapDialog",
    props: {
      crtField: {
        type: Object,
      },
      insertSynonymDisplayFlag: {
        type: Boolean,
        default: true,
      }
    },
    data() {
      return {
        visible: false,
        insertSynonymFlag: false,
        crtRow: null
      }
    },
    methods: {
      openDialog() {
        this.insertSynonymFlag = false
        this.$nextTick(()=>{
          // 计算 默认选中匹配字段;
          this.crtRow = null
          for(let knowledgeField of this.filteredKnowledgeFieldList) {
            if (knowledgeField.name === this.crtField.name || knowledgeField.synonym.includes(this.crtField.name)) {
              this.crtRow = knowledgeField
              break
            }
          }
          this.$refs.mapTable.setCurrentRow(this.crtRow)
        })
      },
      closeDialog() {
        this.visible = false
      },
      submitMatchField() {
        if (this.crtRow) {
          if (this.insertSynonymFlag) {
            this.crtRow.synonym.pushIfNotContains(this.crtField.name)
          }
          this.$emit('setMatchingFieldCallBack', this.crtRow)
          this.closeDialog()
        }
        else {
          this.$message.warning('请选择匹配的知识字段')
        }
      },
    },
    computed: {
      // 只展示普通文本固定字段, 输入框, 文本域, 富文本;
      filteredKnowledgeFieldList() {
        return this.$store.state.knowledgeLibFieldList
          .filter(item => item.kind === CONST.FIELD_KIND_STRINGTEXT
            || item.kind === CONST.FIELD_KIND_RICHEDITOR
            || item.kind === CONST.FIELD_KIND_TEXTAREA)
          .slice(1)
      }
    }
  }
</script>

<style scoped>
  /deep/ tr.current-row > td{
    background-color: #2DB7A0 !important;
    color: white;
  }
</style>
